<template>  
    <div>  
      <el-table :data="books" style="width: 100%">  
        <el-table-column prop="id" label="ID" width="180"></el-table-column>  
        <el-table-column prop="title" label="书名" width="180"></el-table-column>  
        <el-table-column prop="author" label="作者" width="180"></el-table-column>  
        <el-table-column prop="copies" label="数量" width="180"></el-table-column>  
        <el-table-column label="操作">  
          <template slot-scope="scope">  
            <el-button @click="handleDelete(scope.row.id)">删除</el-button>  
          </template>  
        </el-table-column>  
      </el-table>  
      <BookForm @book-added="handleAddBook" />  
    </div>  
  </template>  
    
  <script>  
  import BookForm from './BookForm.vue'  
    
  export default {  
    components: {  
      BookForm  
    },  
    data() {  
      return {  
        books: [  
          // ... 图书数据 ...  
        ]  
      }  
    },  
    methods: {  
      handleAddBook(book) {  
        this.books.push(book);  
      },  
      handleDelete(id) {  
        this.books = this.books.filter(book => book.id !== id);  
      }  
    }  
  }  
  </script>